import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
Vue.use(Vuex);
Vue.prototype.$http = axios;
export default new Vuex.Store({
  state: {
    list: [],
    tit: "",
    key: "all",
  },
  getters: {
    noMoule(state) {
      return state.list.filter((item) => item.done === false).length;
    },
    showLsit(state) {
      if (state.key === "yes") {
        return state.list.filter((item) => item.done === true);
      } else if (state.key === "no") {
        return state.list.filter((item) => item.done === false);
      } else {
        return state.list;
      }
    },
  },
  mutations: {
    getseList(state, list) {
      state.list = list;
    },
    deletList(state, i) {
      state.list = state.list.filter((item) => item.id !== i);
    },
    addnewList(state) {
      const newObj = {
        id: state.list[state.list.length - 1].id + 1,
        info: state.tit,
        done: false,
      };
      state.list.push(newObj);
      state.tit = "";
    },
    getInput(state, val) {
      state.tit = val;
    },
    changStatus(state, i) {
      state.list[i].done = !state.list[i].done;
    },
    // 清除已完成
    removeWancheng(state) {
      state.list = state.list.filter((item) => item.done !== true);
      console.log(state.list);
    },
    change(state, val) {
      state.key = val;
    },
    GaiChe(state, val) {
      state.list.forEach((item) => (item.done = val));
    },
  },
  actions: {
    getList(context) {
      axios.get("/list.json").then((data) => {
        context.commit("getseList", data.data);
      });
    },
  },
  modules: {},
});
